<template>
	<div>
		<!-- 顶部选项卡 -->
		<scroll-view class="pagecontrol-top-scroll" scroll-x="true" scroll-with-animation
			:scroll-into-view="scrollInto">
			<view class="pagecontrol-top-title">
				<view v-for="(items, index) in itemsArr" :key="index" class="pagecontrol-top-text"
					@click="changeTab(index)" :id="'tab' + index">
					<view :class="tabIndex === index ? 'pagecontrol-top-selected' : 'pagecontrol-top-normal'">
						{{ items }}
					</view>
					<view class="pagecontrol-bottom-line"
						:class="tabIndex === index ? 'pagecontrol-bottom-line-show' : 'pagecontrol-bottom-line-visibility'">
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 内容 -->
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:' + scrollH + 'px;'">
			<swiper-item>
				<scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'">
					<view style="padding-bottom: 100px;">
						<!--基本资料-->
						<view style="background-color: #ffffff;margin: 10px;border-radius: 12px;padding: 15px;">
							<uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="75px">
								<uni-forms-item label="项目名称" name="projectName" required>
									<uni-easyinput type="text" v-model="formData.projectName" placeholder="请输入项目名称" />
								</uni-forms-item>
								<uni-forms-item label="所属客户" name="customerId" required>
									<uni-data-select @change="selectReceiveSend" v-model="formData.customerId"
										:localdata="customerId" style="background-color: white;" />
								</uni-forms-item>
								<uni-forms-item label="项目负责人" name="leader" required>
									<uni-easyinput type="text" v-model="formData.leader" placeholder="请输入项目负责人" />
								</uni-forms-item>
								<uni-forms-item label="联系电话" name="phone" required>
									<uni-easyinput type="number" v-model="formData.phone" placeholder="请输入联系电话" />
								</uni-forms-item>
								<uni-forms-item label="所在地址" name="districtId" required>
									<uni-data-picker ref="dataPicker" placeholder="请选择地址" popup-title="请选择所在地区"
										:localdata="districtId" style="background-color: white;"
										v-model="formData.districtId">
									</uni-data-picker>
									<view style="margin-top: 20px;">
										<uni-easyinput type="text" v-model="formData.address" placeholder="请输入详细地址" />
									</view>
								</uni-forms-item>
								<uni-forms-item label="开始日期" name="beginDate">
									<uni-datetime-picker type="date" v-model="formData.beginDate" />
								</uni-forms-item>
								<uni-forms-item label="结束日期" name="endDate">
									<uni-datetime-picker type="date" v-model="formData.endDate" />
								</uni-forms-item>
								<uni-forms-item label="结算方式" name="settleType" required>
									<uni-data-select v-model="formData.settleType" :localdata="settleType"
										style="background-color: white;" />
									<view style="margin-top: 20px;">
										<!--现付-->
										<!-- <span style="display: flex;align-items: center;"
											v-if="formData.settleType=='1'">
											<view style="flex: 2;">
												<uni-easyinput type="number" v-model="formData.spotPay"
													placeholder="现付金额" />
											</view>
											<view style="flex: 1;margin-left: 5px;">/元</view>
										</span> -->
										<!--到付-->
										<!-- <span style="display: flex;align-items: center;"
											v-if="formData.settleType=='2'">
											<view style="flex: 2;">
												<uni-easyinput type="number" v-model="formData.freightPay"
													placeholder="到付金额" />
											</view>
											<view style="flex: 1;margin-left: 5px;">/元</view>
										</span> -->
										<!--欠付-->
										<!-- <span style="display: flex;align-items: center;"
											v-if="formData.settleType=='3'">
											<view style="flex: 2;">
												<uni-easyinput type="number" v-model="formData.arrearsPay"
													placeholder="欠付金额" />
											</view>
											<view style="flex: 1;margin-left: 5px;">/元</view>
										</span> -->
										<!--回单付-->
										<!-- <span style="display: flex;align-items: center;"
											v-if="formData.settleType=='4'">
											<view style="flex: 2;">
												<uni-easyinput type="number" v-model="formData.receiptPay"
													placeholder="回单付金额" />
											</view>
											<view style="flex: 1;margin-left: 5px;">/元</view>
										</span> -->
										<!--月付-->
										<span style="display: flex;align-items: center;"
											v-if="formData.settleType=='5'">
											<!-- <view style="flex: 1;">
												<uni-easyinput type="number" v-model="formData.monthlyBalance"
													placeholder="月付金额" />
											</view> -->
											<view style="flex: 1;margin-left: 5px;">
												<uni-combox :candidates="payType_day" placeholder="请选择天数"
													v-model="formData.monthlyDays"></uni-combox>
											</view>
										</span>
										<!--混合付-->
										<!-- <span style="display: flex;flex-direction: column;"
											v-else-if="formData.settleType=='7'">
											<span style="display: flex;align-items: center;">
												<view style="flex: 2;">
													<uni-easyinput type="number" v-model="formData.spotPay"
														placeholder="现付" />
												</view>
												<view style="flex: 1;margin-left: 5px;">/元</view>

												<view style="flex: 2;">
													<uni-easyinput type="number" v-model="formData.freightPay"
														placeholder="到付" />
												</view>
												<view style="flex: 1;margin-left: 5px;">/元</view>
											</span>
											<span style="display: flex;align-items: center;margin-top: 20px;">
												<view style="flex: 2;">
													<uni-easyinput type="number" v-model="formData.arrearsPay"
														placeholder="欠付" />
												</view>
												<view style="flex: 1;margin-left: 5px;">/元</view>

												<view style="flex: 2;">
													<uni-easyinput type="number" v-model="formData.receiptPay"
														placeholder="回单付" />
												</view>
												<view style="flex: 1;margin-left: 5px;">/元</view>
											</span>
											<span style="display: flex;align-items: center;margin-top: 20px;">
												<view style="flex: 1;">
													<uni-easyinput type="number" v-model="formData.monthlyBalance"
														placeholder="月结金额" />
												</view>
												<view style="flex: 1;margin-left: 5px;">
													<uni-combox :candidates="payType_day" placeholder="请选择天数"
														v-model="formData.monthlyDays"></uni-combox>
												</view>
											</span>
										</span> -->
									</view>
								</uni-forms-item>
								<uni-forms-item label="相关附件" name="file">
									<myfilepicker :limit="'3'" :fileIdString="formData.attachInfo" :fileExtname="'pdf,png,gif,jpg,jpeg,doc,docx'" :fileMediatype="'all'"  @transFileIdString="getFileIdString"
											:title="'*点击可上传项目资料，支持pdf/doc/docx/jpg/jpeg/png/gif，最多可上传3个附件*'"></myfilepicker>
								</uni-forms-item>
								<uni-forms-item label="收/发货人">
									<uni-data-select :disabled="formData.customerId==''?true:false"
										@change="addreceiveSend" v-model="receiveSendValue" :localdata="receiveSend"
										style="background-color: white;" />
								</uni-forms-item>
								<view style="margin-bottom: 20px;">
									<view v-for="(item,index) in shipList" :key="index"
										style="display: flex;justify-content: space-between;font-size: 12px;">
										<text>{{item.customer.customerName}}</text>
										<text>{{item.shipFlag=='0'?'收货方':'发货方'}}</text>
										<view @click="changeReceiveSendStatus(index)" hover-class="buttonHover"
											style="border-radius: 50%;border: 1px solid #bf5f09;text-align: center;width: 35px;">
											切换</view>
										<text>{{item.lineLength||0}}条线路</text>
										<view hover-class="buttonHover" style="color: blue;">详情</view>
										<view @click="deleteShipList(index)" hover-class="buttonHover"
											style="color: blue;">移除</view>
									</view>

								</view>
								<uni-forms-item label="备注">
									<uni-easyinput type="textarea" v-model="formData.remark" placeholder="项目相关备注说明" />
								</uni-forms-item>
							</uni-forms>
						</view>
					</view>
				</scroll-view>
				<view
					style="background-color: #ffffff;z-index: 3;height: 70px;width:100%;position: fixed;bottom: 0;display: flex;box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.1);">
					<view
						style="display: flex;align-items: center;width: 100%;height: 60px;justify-content: center;">
						<view v-if="id==''" @click="submit()" hover-class="buttonHover"
							style="height: 35px;background-color: #bf5f09;color: #ffffff;width: 100px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
							确定新增</view>
						<view v-else @click="submit_update()" hover-class="buttonHover"
							style="height: 35px;background-color: #bf5f09;color: #ffffff;width: 100px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
							保存</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'">
					<view v-for="(item,index) in MyShipLineList" :key="index">
						<!--合作线路-->
						<view style="padding: 10px;background-color: white;margin: 10px;border-radius: 12px;">
							<view
								style="display: flex;flex-direction: row;justify-content: space-between;">
								<view style="display: flex;flex-direction: column;">
									<view style="display: flex;align-items: center;margin-bottom: 5px;">
										<view
											style="width: 25px;height: 25px;border-radius: 50%;background-color: #464646;color: #ffffff;display: flex;justify-content: center;align-items: center;">
											寄
										</view>
										<!--当前为收货方-->
										<text v-if="shipList[index].shipFlag=='0'" style="margin-left: 10px;">{{formData.customer.customerName}}</text>
										<!--当前为发货方-->
										<text v-else-if="shipList[index].shipFlag=='1'" style="margin-left: 10px;">{{shipList[index].customer.customerName}}</text>
									</view>
									<view style="display: flex;align-items: center;">
										<view
											style="width: 25px;height: 25px;border-radius: 50%;background-color: #bf6006;color: #ffffff;display: flex;justify-content: center;align-items: center;">
											收
										</view>
										<!--当前为收货方-->
										<text v-if="shipList[index].shipFlag=='0'" style="margin-left: 10px;">{{shipList[index].customer.customerName}}</text>
										<!--当前为发货方-->
										<text v-else-if="shipList[index].shipFlag=='1'" style="margin-left: 10px;">{{formData.customer.customerName}}</text>
									</view>
								</view>
								<view style="display: flex;justify-content: center;align-items: center;">
									<text>{{item.length}}条线路</text>
								</view>
								<view style="display: flex;justify-content: center;align-items: center;">
									<button @click="setShipLineList(index)" hover-class="buttonHover" type="primary"
										style="color:#ffffff;background-color:#bf5f09;font-size: 15px;width: 60px;">设置</button>
								</view>
							</view>
							<view v-for="(item2,index2) in item" :key="index2" style="margin-top: 10px;border-top: 1px solid #ededed;">
								<view style="padding-top: 10px;">
									<view style="margin-bottom: 7px;">
										<view @click="deleteShipLineList(index,index2)" hover-class="buttonHover" 
											style="color:#bf5f09;text-align: end;"><uni-icons type="minus" size="16" color="#bf5f09"></uni-icons>移除</view>
									</view>
									<view>
										<uni-forms :modelValue="item2" :rules="rules">
											<uni-forms-item label="始发地" name="sendBookId" required>
												<uni-data-select @change="changeSendBookId(index,index2,$event)" v-model="item2.sendBookId" :localdata="sendBook[index]"
													style="background-color: white;" />
											</uni-forms-item>
											<uni-forms-item label="目的地" name="recvBookId" required>
												<uni-data-select @change="changeRecvBookId(index,index2,$event)" v-model="item2.recvBookId" :localdata="recvBook[index]"
													style="background-color: white;" />
											</uni-forms-item>
											
											<view style="display: flex;flex-direction: column;margin-bottom: 20px;">
												<view style="display: flex;align-items: center;margin-bottom: 5px;">
													<view
														style="width: 20px;height: 20px;border: 1px solid rgb(91, 86, 86);display: flex;justify-content: center;align-items: center;font-size: 12px;">
														起
													</view>
													<view style="margin-left: 10px;flex:1;">
														<view>
															<text>{{item2.sendBook.contactName}}</text>
															<text
																style="margin-left: 20px;">{{item2.sendBook.phone}}</text>
														</view>
														<view>
															<text>{{item2.sendBook.bookDistrictName}}{{item2.sendBook.bookAddress}}</text>
														</view>
													</view>
												</view>
												<view style="display: flex;align-items: center;">
													<view
														style="width: 20px;height: 20px;border: 1px solid rgb(91, 86, 86);display: flex;justify-content: center;align-items: center;font-size: 12px;">
														止
													</view>
													<view style="margin-left: 10px;flex:1;">
														<view>
															<text>{{item2.recvBook.contactName}}</text>
															<text
																style="margin-left: 20px;">{{item2.recvBook.phone}}</text>
														</view>
														<view>
															<text>{{item2.recvBook.bookDistrictName}}{{item2.recvBook.bookAddress}}</text>
														</view>
													</view>
																			
												</view>
											</view>
										</uni-forms>
										<uni-forms :modelValue="item2" labelWidth="62px">
											<uni-forms-item label="计费方式" name="feeMode" labelWidth="75px" required>
												<view style="display: flex;align-items: center;">
													<uni-data-select @change="changeFeeMode(index,index2)" v-model="item2.pricePlan.feeMode" :localdata="feeMode" :clear="false"
														style="background-color: white;flex: 1;" />
													<checkbox-group style="margin-left: 5px;"  @change="checkboxAddMileage(index,index2,$event)">
														<label>
															<checkbox value="1" :disabled="item2.pricePlan.feeMode=='mileage'" :checked="item2.pricePlan.addFeeMode == '1'" color="#BF5F09;" style="transform:scale(0.7);" /> + 里程
														</label>
													</checkbox-group>
												</view>
											</uni-forms-item>
											<!-- <view style="display: flex;flex-direction: column;margin-top: 10px;" v-for="(item3,index3) in item2.pricePlan.segList" :key="index3">
												<view style="margin-bottom: 5px;">
													<span v-if="item3.feeMode=='mileage'">
														实际里程
													</span>
													<span v-else-if="item3.feeMode=='weight'">
														实际重量
													</span>
													<span v-else-if="item3.feeMode=='volume'">
														实际体积
													</span>
													<span v-else-if="item3.feeMode=='pieces'">
														实际件数
													</span>
													<span v-else-if="item3.feeMode=='volumeWeight'">
														体积重量
													</span>
												</view>
												<view style="display: flex;">
													<view style="flex: 1;">
														<uni-forms-item v-if="item3.feeMode=='mileage'" :label="'首里程'+(index3+1)"  required>
															<view style="display: flex;align-items: center;">
																<uni-easyinput type="number" v-model="item3.floatStart"/>
																<view style="margin-left: 5px;">KM</view>
															</view>
														</uni-forms-item>
														<uni-forms-item v-else-if="item3.feeMode=='weight'" :label="'首重'+(index3+1)"  required>
															<view style="display: flex;align-items: center;">
																<uni-easyinput type="number" v-model="item3.floatStart"/>
																<view style="margin-left: 5px;">KG</view>
															</view>
														</uni-forms-item>
														<uni-forms-item v-else-if="item3.feeMode=='volume'" :label="'首容量'+(index3+1)"  required>
															<view style="display: flex;align-items: center;">
																<uni-easyinput type="number" v-model="item3.floatStart"/>
																<view style="margin-left: 5px;">立方</view>
															</view>
														</uni-forms-item>
														<uni-forms-item v-else-if="item3.feeMode=='pieces'" :label="'首件'+(index3+1)"  required>
															<view style="display: flex;align-items: center;">
																<uni-easyinput type="number" v-model="item3.floatStart"/>
																<view style="margin-left: 5px;">件</view>
															</view>
														</uni-forms-item>
														<uni-forms-item v-else-if="item3.feeMode=='volumeWeight'" :label="'首重'+(index3+1)"  required>
															<view style="display: flex;align-items: center;">
																<uni-easyinput type="number" v-model="item3.floatStart"/>
																<view style="margin-left: 5px;">KG</view>
															</view>
														</uni-forms-item>
													</view>
													<view v-if="item3.floatEnd!='0'" style="flex: 1;">
														<uni-forms-item v-if="item3.feeMode=='mileage'" label="~" labelAlign="center">
															<view style="display: flex;align-items: center;">
																<uni-easyinput type="number" v-model="item3.floatEnd"/>
																<view style="margin-left: 5px;">KM</view>
															</view>
														</uni-forms-item>
														<uni-forms-item v-else-if="item3.feeMode=='weight'" label="~" labelAlign="center">
															<view style="display: flex;align-items: center;">
																<uni-easyinput type="number" v-model="item3.floatEnd"/>
																<view style="margin-left: 5px;">KG</view>
															</view>
														</uni-forms-item>
														<uni-forms-item v-else-if="item3.feeMode=='volume'" label="~" labelAlign="center">
															<view style="display: flex;align-items: center;">
																<uni-easyinput type="number" v-model="item3.floatEnd"/>
																<view style="margin-left: 5px;">立方</view>
															</view>
														</uni-forms-item>
														<uni-forms-item v-else-if="item3.feeMode=='pieces'" label="~" labelAlign="center">
															<view style="display: flex;align-items: center;">
																<uni-easyinput type="number" v-model="item3.floatEnd"/>
																<view style="margin-left: 5px;">件</view>
															</view>
														</uni-forms-item>
														<uni-forms-item v-else-if="item3.feeMode=='volumeWeight'" label="~" labelAlign="center">
															<view style="display: flex;align-items: center;">
																<uni-easyinput type="number" v-model="item3.floatEnd"/>
																<view style="margin-left: 5px;">KG</view>
															</view>
														</uni-forms-item>
													</view>
												</view>
												<uni-forms-item  :label="item3.floatEnd=='0'?'叠加价':'起运价'"  required>
													<span style="display: flex;align-items: center;">
														<view style="flex: 2;">
															<uni-easyinput type="number" v-model="item3.price"/>
														</view>
														<view style="flex: 1;margin-left: 5px;">元</view>
														<view style="flex: 1;display: flex;">
															<span v-if="item2.pricePlan.addFeeMode=='0'" style="display: flex;">
																<view v-if="index3!=0&&item3.floatEnd!='0'" @click="deleteSegList(index,index2,index3)" hover-class="buttonHover"><uni-icons type="minus" size="23" color="#bf5f09"></uni-icons></view>
																<view v-if="item3.floatEnd!='0'" @click="addSegList(index,index2,index3)" hover-class="buttonHover" style="margin-left: 10px;"><uni-icons type="plus" size="23" color="#bf5f09"></uni-icons></uni-icons></view>
															</span>
															<span v-else-if="item2.pricePlan.addFeeMode=='1'" style="display: flex;">
																<view v-if="index3!=0&&item3.floatEnd!='0'" @click="deleteSegList(index,index2,index3)" hover-class="buttonHover"><uni-icons type="minus" size="23" color="#bf5f09"></uni-icons></view>
																<view v-if="item3.floatEnd!='0'" @click="addSegList(index,index2,index3)" hover-class="buttonHover" style="margin-left: 10px;"><uni-icons type="plus" size="23" color="#bf5f09"></uni-icons></uni-icons></view>
															</span>
														</view>
													</span>
												</uni-forms-item>
											</view> -->
											
										</uni-forms>
									</view>
								</view>
							</view>
						</view>
						
					</view>
					<!--分隔100px-->
					<view style="height: 100px;"></view>
				</scroll-view>
				<view
					style="background-color: #ffffff;z-index: 3;height: 70px;width:100%;position: fixed;bottom: 0;display: flex;box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.1);">
					<view
						style="display: flex;align-items: center;width: 100%;height: 60px;justify-content: center;">
						<view v-if="id==''" @click="submit()" hover-class="buttonHover"
							style="height: 35px;background-color: #bf5f09;color: #ffffff;width: 100px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
							确定新增</view>
						<view v-else @click="submit_update()" hover-class="buttonHover"
							style="height: 35px;background-color: #bf5f09;color: #ffffff;width: 100px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
							保存</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'">
					<view style="padding-bottom: 100px;">
						<!--服务人员-->
						<view>
							<radio-group @change="radioChange">
								<label v-for="(item, index) in branchList" :key="index"
									style="display: flex;flex-direction: column;background-color: white;padding: 15px;border-bottom: 1rpx solid #ededed;">
									<view style="display: flex;justify-content: space-between;">
										<text>{{item.name}}</text>
										<text
											style="margin-left: 20px;">{{item.branchUser.phonenumber}}</text>
										<text>{{item.branchDept.deptName}}</text>
										<!-- <text>调度组长(xxx)</text> -->
									</view>
									<view style="position: relative;margin-top: 10px;">
										<radio :value="index" :checked="item.isSupervisor==='1'" />
										<text>设为主管</text>
										<button @click="deleteBranchList(index)" hover-class="buttonHover" type="primary"
											style="position: absolute;width: 60px;text-align: center;right: 0;top:0;color:#ffffff;border-radius: 8px;font-size: 13px;background-color: #bf5f09;">移除</button>
									</view>
								</label>
							</radio-group>
						</view>
						<view @click="addBranchList" hover-class="buttonHover" style="position: fixed;right: 15px;bottom:100px;width: 50px;height:50px;color:#ffffff;background-color:#bf5f09;border-radius: 50%;display:flex;justify-content: center;align-items: center;box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.3);">
							<uni-icons type="plusempty" size="30" color="#ffffff"></uni-icons>
						</view>
					</view>
				</scroll-view>
				<view
					style="background-color: #ffffff;z-index: 3;height: 70px;width:100%;position: fixed;bottom: 0;display: flex;box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.1);">
					<view
						style="display: flex;align-items: center;width: 100%;height: 60px;justify-content: center;">
						<view v-if="id==''" @click="submit()" hover-class="buttonHover"
							style="height: 35px;background-color: #bf5f09;color: #ffffff;width: 100px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
							确定新增</view>
						<view v-else @click="submit_update()" hover-class="buttonHover"
							style="height: 35px;background-color: #bf5f09;color: #ffffff;width: 100px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
							保存</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 设置人员弹窗 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="确定" title="设置服务人员" @confirm="dialogConfirm">
				<scroll-view scroll-top="0" scroll-y="true" style="height: 200px;">
					<view style="display: flex;flex-direction: column;width: 100%;">
						<uni-forms labelWidth="75px">
							<uni-forms-item label="部门/网点">
								<uni-data-select  @change="selectDept" v-model="dept" :localdata="deptList" :clear="false"
									style="background-color: white;" />
							</uni-forms-item>
							<uni-forms-item label="选择人员">
								<uni-data-checkbox  mode="button" multiple v-model="user" :localdata="userList"></uni-data-checkbox>
							</uni-forms-item>
						</uni-forms>
					</view>
				</scroll-view>
			</uni-popup-dialog>
		</uni-popup>
	</div>
</template>

<script>
	import {
		getCustomerList
	} from '@/api/system/customer.js'
	import {
		getProjectDetails,
		addProject,
		updateProjectProfile,
		getDeptList,
		getUserList
	} from '@/api/system/project.js'
	import {getDicts,getAllAddressTree} from '@/api/system/dict.js'
	import myfilepicker from '@/components/uploadFile/uploadFile.vue'
	
	export default {
		components: {
			myfilepicker
		},
		data() {
			return {
				itemsArr: ['基本资料', '合作线路', '服务人员'],
				tabIndex: 0,
				scrollH: 700,
				scrollInto: '',
				formData: {
					projectName: '',
					customerId: '',
					leader: '',
					phone: '',
					districtId: '',
					address: '',
					beginDate: '',
					endDate: '',
					settleType: '',
					monthlyDays: '',
					attachInfo: '',
					shipList: [],
					remark: '',
				},
				// 校验规则
				rules: {
					projectName: {
						rules: [{
							required: true,
							errorMessage: '请输入项目名称',
						}]
					},
					customerId: {
						rules: [{
							required: true,
							errorMessage: '请选择所属客户',
						}]
					},
					leader: {
						rules: [{
							required: true,
							errorMessage: '请输入项目负责人',
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入联系电话',
						},
						{
						    pattern: '^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$',
						    errorMessage: '电话格式不正确'
						}
						]
					},
					districtId: {
						rules: [{
							required: true,
							errorMessage: '请选择所在地址',
						}]
					},
					settleType: {
						rules: [{
							required: true,
							errorMessage: '请选择结算方式',
						}]
					}
				},
				//下拉框 ->所属客户
				customerId: [],
				//下拉框 ->结算方式
				settleType: [],
				//下拉框 ->月结多少天
				payType_day: ['7', '15', '30', '45', '60'],
				//下拉框 ->收发货人
				receiveSend: [],
				receiveSendValue: '',
				//地区下拉框
				districtId: [],

				// 服务人员(回显数据)
				branchList: [],
				
				//所有客户信息
				customer: [],
				//收发货人集合
				shipList: [],
				//需要上传的合作线路集合
				shipLineList:[],
				//回显本地的合作线路集合
				MyShipLineList:[],
				
				id: '',
				//始发地下拉框
				sendBook:[],
				sendBookList:[],
				//目的地下拉框
				recvBook:[],
				recvBookList:[],
				
				//计费方式 ->下拉框
				feeMode:[],
				
				//服务部门、网点下拉框
				deptList:[],
				dept:[],
				//服务部门、网点内的用户
				userList:[],
				user:[],
			}
		},
		onLoad(e) {
			uni.getSystemInfo({
				success: res => {
					this.scrollH = res.windowHeight - 40;
				}
			});

			if (e.id) {
				//设置顶部导航栏标题
				uni.setNavigationBarTitle({
					title: '编辑项目'
				})

				uni.showLoading({
					title: '正在加载',
				})
				this.id = e.id
				//获取项目详情
				getProjectDetails(e.id).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.formData = res.data	
						//当前需要上传的合作路线
						this.shipLineList = this.formData.shipLineList||[]
						this.shipList = this.formData.shipList||[]
						
						//收、发货人信息
						this.receiveSend.forEach(item => {
							if (item.value == this.formData.customerId) {
								item.disable = true
							}
							//置灰已选择列表中的数据
							this.shipList.forEach(item2=>{
								if(item.value==item2.customerId)
								{
									item.disable = true
								}
							})
							
						})

						//当前回显本地的合作线路集合
						this.shipList.forEach(item=>{
							var MyShipLineList=[]
							if(item.shipFlag==='0')  //如果当前为收货方
							{
								var n=0;
								this.shipLineList.forEach(item2=>{
									if(item2.recvCustomerId===item.customerId)
									{
										if(item2.pricePlan===null)  //防止数据为null出错
										{
											item2.pricePlan={segList:[]}
										}
										MyShipLineList.push(item2)
										n++;
									}
								})
								item['lineLength']=n;
							}
							else if(item.shipFlag==='1')//如果当前为发货方
							{
								var n=0;
								this.shipLineList.forEach(item2=>{
									if(item2.sendCustomerId===item.customerId)
									{
										if(item2.pricePlan===null) //防止数据为null出错
										{
											item2.pricePlan={segList:[]}
										}
										MyShipLineList.push(item2)
										n++;
									}
								})
								item['lineLength']=n;
							}
							this.MyShipLineList.push(MyShipLineList)
						})
						//加载合作路线的始发地、目的地下拉框数据
						this.getSendRecvList()			
						
						//服务人员
						this.branchList=this.formData.branchList.map(item=>{
							return {
								value: item.branchUserId,
								name: item.branchUser.userName,
								branchDept:item.branchDept,
								branchDeptId:item.branchDeptId,
								branchUser:item.branchUser,
								id:item.id,
								isSupervisor:item.isSupervisor,
								projectId:item.projectId
							}
						})
						
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			}
		},
		created() {
			//获取所属客户下拉框
			getCustomerList({pageNum:1,pageSize:1000}).then(res => {
				this.customer = res.rows
				this.customerId = res.rows.map(item => {
					return {
						value: item.customerId,
						text: item.customerName
					}
				})
				//获取收/发货人信息下拉框
				this.receiveSend = JSON.parse(JSON.stringify(this.customerId))
			})

			//获取全国地址信息
			getAllAddressTree().then(res=>{
				this.districtId=res.data
			})
			
			//获取计费方式下拉框
			getDicts('price_method').then(res=>{
				this.feeMode=res.data.map(item=>{
					return {
						value:item.dictValue,
						text:item.dictLabel
					}
				})
			})
			
			//获取结算方式下拉框
			getDicts('settle_type').then(res=>{
				this.settleType=res.data.map(item=>{
					return {
						value:item.dictValue,
						text:item.dictLabel
					}
				})
			})
		},
		methods: {
			//接收文件传递的id字符串集合
			getFileIdString(fileIds){
				this.formData.attachInfo=fileIds
			},
			//加载合作路线的始发地、目的地下拉框数据
			getSendRecvList(){
				this.shipList.forEach((item,index)=>{
					if(item.shipFlag=='0')//收货
					{
						this.recvBookList[index]=item.customer.bookList
						this.recvBook[index]=item.customer.bookList.map(item=>{
							return {
								value:item.id,
								text:item.bookDistrictName+item.bookAddress+' '+item.contactName
							}
						})
						
						this.sendBookList[index]=this.formData.customer.bookList
						this.sendBook[index]=this.formData.customer.bookList.map(item=>{
							return {
								value:item.id,
								text:item.bookDistrictName+item.bookAddress+' '+item.contactName
							}
						})
					}
					else if(item.shipFlag=='1')//发货
					{
						this.recvBookList[index]=this.formData.customer.bookList
						this.recvBook[index]=this.formData.customer.bookList.map(item=>{
							return {
								value:item.id,
								text:item.bookDistrictName+item.bookAddress+' '+item.contactName
							}
						})
						
						this.sendBookList[index]=item.customer.bookList
						this.sendBook[index]=item.customer.bookList.map(item=>{
							return {
								value:item.id,
								text:item.bookDistrictName+item.bookAddress+' '+item.contactName
							}
						})
					}
				})
			},
			// 切换选项
			changeTab(index) {
				if (this.tabIndex === index) {
					return;
				}
				this.tabIndex = index;
				// 滚动到指定元素
				this.scrollInto = 'tab' + index;
			},
			// 监听滑动
			onChangeTab(e) {
				uni.showLoading({
					title: '正在加载',
				})
				setTimeout(function() {
					uni.hideLoading()
				}, 500);
				this.changeTab(e.detail.current);
			},
			//选择服务人员
			radioChange(e) {
				//设置为主管
				this.branchList.forEach((item,index)=>{
					if(e.detail.value==index) //选择的序列设为主管
					{
						item.isSupervisor='1'
					}
					else
					{
						item.isSupervisor='0'
					}
				})
			},
			//移除服务人员
			deleteBranchList(index){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除此条数据？',
					success: function (res) {
						if (res.confirm) {
							that.branchList.splice(index,1)
						}
					}
				});
			},
			//添加服务人员按钮
			addBranchList(){
				this.deptList=[]
				this.dept=[]
				this.userList=[]
				this.user=[]
				
				getDeptList().then(res=>{
					this.deptList=res.data.map(item=>{
						return {
							value:JSON.stringify(item),
							text:'【'+(item.deptType==='3'?'部门':'网点')+'】'+item.deptName
						}
					})
				})
				this.$refs.alertDialog.open()
			},
			//选择部门、网点
			selectDept(e){
				getUserList({
					deptId:JSON.parse(this.dept).deptId,
					pageNum:1,
					pageSize:1000
				}).then(res=>{
					this.userList=res.rows.map(item=>{
						let flag=false
						this.branchList.forEach(item2=>{
							if(item2.value==item.userId)
							{
								flag=true
							}
						})
						return {
							value:JSON.stringify(item),
							text:item.userName+' '+item.phonenumber,
							disable: flag
						}
					})
					
				})
			},
			//确认设置服务人员
			dialogConfirm() {
				if(this.user.length)
				{
					this.user.forEach(item=>{
						let user=JSON.parse(item)
						this.branchList.push({
							value: user.userId,
							name: user.userName,
							branchDept:user.dept,
							branchDeptId:user.dept.deptId,
							branchUser:user,
							isSupervisor:'0',
						})
					})
				}
				
			},
			//选择所属客户后，带出下方的收/发货人
			selectReceiveSend(customerId) {
				//  收/发货人信息
				let receiveSend = JSON.parse(JSON.stringify(this.customerId))
				receiveSend.forEach(item => {
					if (item.value == customerId) {
						item.disable = true
					}
				})
				this.receiveSend = receiveSend
				
				this.customer.forEach(item => {
					if (item.customerId == customerId) {
						this.formData.customer=item
					}
				})
			},
			//选择收/发货人(可多次选择)
			addreceiveSend(customerId) {
				if (customerId) {
					this.customer.forEach(item => {
						if (item.customerId == customerId) {  //收货人
							this.shipList.push({
								customer: item,
								customerId: customerId,
								projectId: this.formData.id,
								shipFlag: '0'
							})
						}	
					})
					
					//置灰收、发货人下拉框
					this.receiveSend.forEach(item => {
						//置灰已选择列表中的数据
						this.shipList.forEach(item2=>{
							if(item.value==item2.customerId)
							{
								item.disable = true
							}
						})
						
					})
						
					//更新回显的合作路线列表
					this.MyShipLineList.push([])
					
					//加载合作路线的始发地、目的地下拉框数据
					this.getSendRecvList()
				}
			},
			//切换收/发货状态
			changeReceiveSendStatus(index) {
				this.shipList[index].shipFlag = this.shipList[index].shipFlag == '0' ? '1' : '0'
				//更改路线里的收发货人设置
				let tempBook=[]
				let tempBookId=''
				let tempCustomer=[]
				let tempCustomerId=''
				this.MyShipLineList[index].forEach(item=>{
					tempBook=item.sendBook
					tempBookId=item.sendBookId
					tempCustomer=item.sendCustomer
					tempCustomerId=item.sendCustomerId
					item.sendBook=item.recvBook
					item.sendBookId=item.recvBookId
					item.sendCustomer=item.recvCustomer
					item.sendCustomerId=item.recvCustomerId
					item.recvBook=tempBook
					item.recvBookId=tempBookId
					item.recvCustomer=tempCustomer
					item.recvCustomerId=tempCustomerId
				})
				//更改路线里的始发地、目的地下拉框数据
				let tempBook2=[]
				let tempBookList=[]
				tempBookList=this.sendBookList[index]
				tempBook2=this.sendBook[index]
				this.sendBookList[index]=this.recvBookList[index]
				this.sendBook[index]=this.recvBook[index]
				this.recvBookList[index]=tempBookList
				this.recvBook[index]=tempBook2
			},
			//删除收/发货列表
			deleteShipList(index) {
				//置灰收、发货人下拉框
				this.receiveSend.forEach(item => {
					//置灰已选择列表中的数据
					if(item.value==this.shipList[index].customerId)
					{
						item.disable = false
					}
				})
				
				//删除
				this.shipList.splice(index, 1);
				
				if(this.shipList.length==0)
				{
					this.shipLineList=[]
				}
				this.MyShipLineList.splice(index,1)
			},
			//提交新增项目
			submit() {
				let that = this
				this.$refs.form.validate().then(res => {
					let isSupervisor=false
					this.branchList.forEach(item=>{
						if(item.isSupervisor=='1')
						{
							isSupervisor=true
						}
					})
					if(!isSupervisor)
					{
						uni.showToast({
							title: '请在【服务人员】中设置一名主管',
							icon:'none'
						})
						return
					}

					//收、发货人
					that.formData.shipList = that.shipList
					uni.showLoading({
						title: '正在提交...',
					})
					
					//合作路线信息
					let shipLineList=[]
					this.MyShipLineList.forEach(item=>{
						shipLineList.push(...item)
					})
					//新增需要price字段
					shipLineList.forEach(item=>{
						item.price=item.pricePlan
					})
					
					that.formData.shipLineList=shipLineList
					
					//服务人员
					let branchList=this.branchList.map(item=>{
						return{
							branchDept:item.branchDept,
							branchDeptId:item.branchDeptId,
							branchUser:item.branchUser,
							branchUserId:item.value,
							isSupervisor:item.isSupervisor,
						}
					})
					this.formData.branchList=branchList
					
					addProject(that.formData).then(res => {
						uni.hideLoading()
						if (res.code == '200') {
							uni.showToast({
								title: '提交成功',
								icon: 'none'
							})
							let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
							let nowPage = pages[pages.length - 1]; //当前页页面实例
							let prevPage = pages[pages.length - 2]; //上一页页面实例
							prevPage.$vm.otherFun('1') // 給上一頁綁定方法otherFun,傳參0（tabIndex：0）
							uni.navigateBack({
								delta: 1 // 可以不傳delta值，默認為1
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err[0].errorMessage,
						icon: 'none'
					})
				})
			},
			//修改项目
			submit_update() {
				let that = this
				this.$refs.form.validate().then(res => {
					
					let isSupervisor=false
					this.branchList.forEach(item=>{
						if(item.isSupervisor=='1')
						{
							isSupervisor=true
						}
					})
					if(!isSupervisor)
					{
						uni.showToast({
							title: '请在【服务人员】中设置一名主管',
							icon:'none'
						})
						return
					}

					//收、发货人
					that.formData.shipList = that.shipList
					uni.showLoading({
						title: '正在提交...',
					})
					
					//合作路线信息
					let shipLineList=[]
					this.MyShipLineList.forEach(item=>{
						shipLineList.push(...item)
					})
					//新增需要price字段
					shipLineList.forEach(item=>{
						item.price=item.pricePlan
					})
					that.formData.shipLineList=shipLineList
					
					//服务人员
					let branchList=this.branchList.map(item=>{
						return{
							branchDept:item.branchDept,
							branchDeptId:item.branchDeptId,
							branchUser:item.branchUser,
							branchUserId:item.value,
							isSupervisor:item.isSupervisor,
						}
					})
					this.formData.branchList=branchList
					
					that.formData.id = that.id
					updateProjectProfile(that.formData).then(res => {
						uni.hideLoading()
						if (res.code == '200') {
							uni.showToast({
								title: '修改成功',
								icon: 'none'
							})
							let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
							let nowPage = pages[pages.length - 1]; //当前页页面实例
							let prevPage = pages[pages.length - 2]; //上一页页面实例
							prevPage.$vm.otherFun('1') // 給上一頁綁定方法otherFun,傳參0（tabIndex：0）
							setTimeout(() => {
								uni.navigateBack({
									delta: 1 // 可以不傳delta值，默認為1
								})
							}, 1000)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err[0].errorMessage,
						icon: 'none'
					})
				})
			},
			//添加合作路线
			setShipLineList(index){
				this.MyShipLineList[index].push({
					pricePlan:{
						addFeeMode:'0',
						feeMode:'mileage',
						segList:[
							{
								feeMode:'mileage',
								floatEnd:'',
								floatStart:'',
								price:'',
							},
							{
								feeMode:'mileage',
								floatEnd:0,
								floatStart:'',
								price:'',
							}
						]
					},
					pricePlanId:'',
					projectId:this.formData.id,
					recvBook:[],
					recvBookId:'',
					recvCustomer:[],
					recvCustomerId:'',
					sendBook:[],
					sendBookId:'',
					sendCustomer:[],
					sendCustomerId:''
				})
				//路线增加
				this.$nextTick(()=>{
					this.shipList[index].lineLength++;
				})
			},
			//删除某条合作路线
			deleteShipLineList(index,index2){
				this.MyShipLineList[index].splice(index2,1)
				//路线增加
				this.shipList[index].lineLength--;
			},
			//更改起始地
			changeSendBookId(index,index2,e){
				if(e)
				{
					//加载合作路线的始发地、目的地下拉框数据
					this.sendBookList[index].forEach(item=>{
						if(item.id==e)
						{
							this.MyShipLineList[index][index2].sendBook=item
							this.customer.forEach(item2 => {
								if (item2.customerId == item.customerId) {
									this.MyShipLineList[index][index2].sendCustomer=item2
									this.MyShipLineList[index][index2].sendCustomerId=item2.customerId
								}
							})
							
						}
					})
				}
				else
				{
					this.MyShipLineList[index][index2].sendBook=[]
					this.MyShipLineList[index][index2].sendCustomer=[]
					this.MyShipLineList[index][index2].sendCustomerId=''
				}
				
			},
			//更改目的地
			changeRecvBookId(index,index2,e){
				if(e)
				{
					//加载合作路线的始发地、目的地下拉框数据
					this.recvBookList[index].forEach(item=>{
						if(item.id==e)
						{
							this.MyShipLineList[index][index2].recvBook=item
							this.customer.forEach(item2 => {
								if (item2.customerId == item.customerId) {
									this.MyShipLineList[index][index2].recvCustomer=item2
									this.MyShipLineList[index][index2].recvCustomerId=item2.customerId
								}
							})
							
						}
					})
				}
				else
				{
					this.MyShipLineList[index][index2].recvBook=[]
					this.MyShipLineList[index][index2].recvCustomer=[]
					this.MyShipLineList[index][index2].recvCustomerId=''
				}
			},
			//添加里程
			checkboxAddMileage(index,index2,e){
				if(e.detail.value[0])//添加里程
				{
					this.MyShipLineList[index][index2].pricePlan.segList.unshift(
					{
						feeMode:'mileage',
						floatEnd:'',
						floatStart:'',
						price:'',
					},
					{
						feeMode:'mileage',
						floatEnd:0,
						floatStart:'',
						price:'',
					})
					// this.MyShipLineList[index][index2].pricePlan.segList.unshift({
					// 	feeMode:'mileage',
					// 	floatEnd:0,
					// 	floatStart:'',
					// 	price:'',
					// })
					this.MyShipLineList[index][index2].pricePlan.addFeeMode='1'
				}
				else //取消里程
				{
					let segList=JSON.parse(JSON.stringify(this.MyShipLineList[index][index2].pricePlan.segList))
					segList.forEach((item,index_)=>{
						if(item.feeMode=='mileage')
						{
							this.MyShipLineList[index][index2].pricePlan.segList.splice(index,1)
						}
					})
					this.MyShipLineList[index][index2].pricePlan.addFeeMode='0'
				}
			},
			//更改计费方式
			changeFeeMode(index,index2){
				//清空内容，重新push
				this.MyShipLineList[index][index2].pricePlan.segList=[]
				this.MyShipLineList[index][index2].pricePlan.segList.push(
				{
					feeMode:this.MyShipLineList[index][index2].pricePlan.feeMode,
					floatEnd:'',
					floatStart:'',
					price:'',
				},
				{
					feeMode:this.MyShipLineList[index][index2].pricePlan.feeMode,
					floatEnd:0,
					floatStart:'',
					price:'',
				})
				// this.MyShipLineList[index][index2].pricePlan.segList.push({
				// 	feeMode:this.MyShipLineList[index][index2].pricePlan.feeMode,
				// 	floatEnd:0,
				// 	floatStart:'',
				// 	price:'',
				// })
				//添加里程置为0
				this.MyShipLineList[index][index2].pricePlan.addFeeMode='0'
			},
			//添加计费方式节点
			addSegList(index,index2,index3){
				this.MyShipLineList[index][index2].pricePlan.segList.splice((index3+1), 0, {
					feeMode:this.MyShipLineList[index][index2].pricePlan.segList[index3].feeMode,
					floatEnd:'',
					floatStart:'',
					price:'',
				});
			},
			//删除计费方式节点
			deleteSegList(index,index2,index3){
				this.MyShipLineList[index][index2].pricePlan.segList.splice(index3, 1);
			},
		},
	}
</script>

<style scoped>
	.pagecontrol-top-scroll {
		height: 40px;
		width: 100%;
		white-space: nowrap;
		box-sizing: border-box;
		border-bottom: 1rpx solid #ededed;
		background-color: #f8f8f8;
	}

	.pagecontrol-top-title {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: space-around;
	}

	.pagecontrol-top-text {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.pagecontrol-top-normal {
		color: #656565;
		font-size: 16px;
	}

	.pagecontrol-top-selected {
		color: #000000;
		font-weight: bold;
		font-size: 16px;
	}

	.pagecontrol-bottom-line {
		width: 33vw;
		height: 3px;
		margin-top: 8px;
		background-color: #bf5f09;
		border-radius: 11px;
	}

	.pagecontrol-bottom-line-show {
		visibility: visible;
	}

	.pagecontrol-bottom-line-visibility {
		visibility: hidden;
	}

	.buttonHover {
		opacity: 0.6;
	}

	::v-deep .file-title{
		font-size: 12px;
		color: #333;
	}
	
	::v-deep .uni-select__input-box{
		width: 0vw;
	}
	
	::v-deep .uni-border-left{
	    border-left-color: #f0f0f0;
	    border-left-style: solid;
	    border-left-width: 1px;
	    background-color: rgb(157,81,38);
	    border-radius: 0 0 11px 0;
	    /* color: white; */
	}
	::v-deep .uni-button-color{
	    color: #ffffff;
	}
</style>